<template>
	<view>
		<!-- 自定义导航 -->
		<LineLineNavBar :tabBars="tabBars" :tabIndex="tabIndex" @pidchang-tab="pidchangTab"></LineLineNavBar>		
		<!-- 将导航栏数据放入navData中,默认为{[name: 'XXX']}，可到componets/Nav.vue中修改 -->
		<Nav :navData="navData" @changeTab='changeTab' :changeNavIndex="current"></Nav>
		<!-- 列表 -->
		<view class="uni-tab-bar">
			<swiper :style="{height:swiperHeight+'px'}" class="swiper-box" :current="tabIndex" @change="tabChange">
				<swiper-item>
					<!-- 内容页 -->
					<swiper :style="{height:swiperHeight+'px'}" :current="current" :autoplay="false" ::duration="200" @change="changeSwiper">
						<swiper-item v-for="(item, index) in navData">
							<goodsListthree :dataList="dataList" :index="current"></goodsListthree>
							<uni-load-more :status="more"></uni-load-more>
						</swiper-item>
					</swiper>
				</swiper-item>
				
				<swiper-item>
					<!-- 内容页 -->
					<swiper :style="{height:swiperHeight+'px'}" :current="current" :autoplay="false" ::duration="200" @change="changeSwiper">
						<swiper-item v-for="(item, index) in navData">
							<goodsListthree :dataList="dataList" :index="current"></goodsListthree>
							<uni-load-more :status="more"></uni-load-more>
						</swiper-item>
					</swiper>
				</swiper-item>
			
			</swiper>
			
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more'
	import LineLineNavBar from "../../components/goods/line-line-nav-bar"
	import loadMore from "../../components/common/load-more"
	import commonList from "../../components/common/common-list"
	import Nav from '../../components/faquan/zq-Nav'
	import apiindex from '../../common/api/index'
	import goodsListthree from "../../components/goods/goods-listthree"
	export default {
		data() {
			return {
				more:'loading',
				listHeight:0,
				swiperHeight:150,//屏幕高度
				tabIndex:0,//tab索引
				tabBars:[
					{name:"淘宝",id:"guanzhu"},
					{name:"拼多多",id:"huati"}
				],
				
				
				// 导航栏数据
				navData: [],
				// 分类数据
				dataList: [],
				current: 0,
				refreshering: true,
				
				
				cate_params:{
					type:'index',
				},
				
				
				goods_params:{
					range_list:1,
					cid:0,
					page:1,
					page_size:10,
					site:'index',
					type:2,
				},
			}
		},
		onLoad() {
			uni.showNavigationBarLoading()
			this.goodscategory()
			this.home_free_ship()
		},
		
		onShow() {
		},
		
		components:{
			LineLineNavBar,
			commonList,
			loadMore,
			Nav,
			apiindex,
			goodsListthree,
			uniLoadMore
		},
		//上拉加载更多
		onReachBottom:function() {
			this.goods_more_search()
		},
		methods: {
			
			
			//上拉加载更多
			goods_more_search(){
				if(this.tabIndex == 0){
					apiindex.home_free_ship(this.goods_params).then(res =>{
						if(res.code ==1){
							this.dataList = this.dataList.concat(res.data.data)//合并数组
							this.goods_params.page=res.data.next_page
							let current_height = (res.data.data.length) * 150
							this.swiperHeight = this.swiperHeight+current_height
							this.more='loading'
						}else{
							this.more='noMore'							
						}
					}).catch(res =>{
					
					});
				}else{
					apiindex.goods_search(this.goods_params).then(res =>{
						if(res.code ==1){
							this.dataList = this.dataList.concat(res.data)//合并数组
							this.goods_params.page=this.goods_params.page+1
							let current_height = (res.data.data.length) * 150
							this.swiperHeight = this.swiperHeight+current_height
							this.more='loading'
						}else{
							this.more='noMore'							
						}
					}).catch(res =>{
				
					});			
				}
			},
			
			
			
			//获取分类数据
			goodscategory(){
				apiindex.goodsCategory(this.cate_params).then(res =>{
					if(res.code ==1){
						this.navData = res.data
					}
				}).catch(cateres =>{

				});
			},
			
			
			//淘宝的9.9包邮
			home_free_ship(){
				apiindex.home_free_ship(this.goods_params).then(res =>{
					if(res.code ==1){
						this.dataList = res.data.data
						this.goods_params.page=res.data.next_page
						this.swiperHeight = this.dataList.length *150+50
						uni.hideNavigationBarLoading()
					}
				}).catch(res =>{

				});
			},
			
			
			
			//拼多多的9.9包邮
			goods_search(){
				apiindex.goods_search(this.goods_params).then(res =>{
					if(res.code ==1){
						this.dataList=res.data
						this.swiperHeight = this.dataList.length * 150+50
						uni.hideNavigationBarLoading()
					}
				}).catch(res =>{
			
				});
			},
			
			
			
			
			
		
			// 选择导航栏事件
			changeTab(index){
				this.current = index
				this.dataList=[]
				if(this.tabIndex == 0){
					if(index != 0){
						this.goods_params.page=1
						this.goods_params.cid=this.navData[index].category_id;
					}else{
						this.dataList.cid=0;
					}
					this.home_free_ship()
				}else{
					this.goods_params.page=1
					this.goods_params.cid=this.navData[index].category_id;
					this.goods_search()
				}
			},
			
			//点击切换
			pidchangTab(index){
				this.current=0
				this.dataList=[]
				this.navData[index].category_id=0
				this.swiperHeight=150
				if(index == 0){
					//商品分类
					this.cate_params.type='index'
					this.goodscategory()
					//商品列表
					this.goods_params.site='index'
					this.goods_params.page=1
					this.home_free_ship()
				}else{
					//商品分类
					this.cate_params.type='pdd'
					this.goodscategory()
					//商品列表
					this.goods_params.site='pdd'
					this.goods_params.page=1
					this.goods_search()
				}
				this.tabIndex = index;
			},
			
			
			//顶部切换
			tabChange(e){
				uni.showNavigationBarLoading()
				this.tabIndex = e.detail.current
				this.dataList=[]
				this.swiperHeight=150
				if(this.tabIndex == 0){
					//商品分类
					this.cate_params.type='index'
					this.goodscategory()
					//商品列表
					this.goods_params.site='index'
					this.goods_params.page=1
					this.home_free_ship()
				}else{
					//商品分类
					this.cate_params.type='pdd'
					this.goodscategory()
					//商品列表
					this.goods_params.site='pdd'
					this.goods_params.page=1
					this.goods_search()					
				}
			},
			
			
			loadmore(){
				//上拉加载
			},
			// 滑动内容页事件
			changeSwiper(e) {
				this.current = e.detail.current
				this.$emit('changeNavIndex', e.detail.current)
			},
			// 下拉刷新事件
			refresher() {
				var that = this
				that.refreshering = true
				setTimeout(function() {
					that.refreshering = false
				},2000)
			}
		}
	}
</script>

<style scoped>
	uni-swiper{
		height:100%;
	}
	.items{
		width:100%;
		height: 100%;
		/* verflow-y: auto;
	}
	.uni-tab-bar{
		position: fixed;
		left:0;
		top: 72px;
		bottom:0;
		right:0;
		width: 100%;
		/* height: calc(100% - 50px); */
	}
	.faquan-index{
		width:96%;
		padding:0 2% 10% 2%;
	}
	.faquan-index-top{
		width:100%;
		display: flex;
		flex-direction:row;
		flex-wrap:wrap;
		white-space:nowrap;
	}
	.faquan-index-avatar{
		width:15%;
	}
	.faquan-index-avatar image{
		width:80upx;
		height:80upx;
		border-radius:40upx;
	}
	.faquan-index-name{
		width:45%;
	}
	.faquan-index-name>view{
		margin-left:10upx;
	}
	.faquan-index-name>view:first-child{
		font-weight:bold;
		font-size:30upx;
		line-height:30upx;
	}
	.faquan-index-name>view:last-child{
		background:#FA436A;
		color:#fff;
		display:inline-block;
		padding:0 10upx;
		font-size:20upx;
		border-radius:10upx;
		
	}
	.faquan-index-button{
		width:40%;
		padding-top:10upx;
		display: flex;
		flex-direction:row;
		flex-wrap:wrap;
		white-space:nowrap;
	}
	.faquan-index-button>view:first-child{
		width:50%;
	}
	.faquan-index-button>view:last-child{
		width:40%;
		margin-left:10%;
	}
	.faquan-index-button image{
		width:30upx;
		height:30upx;
		display:inline-block;
		position: relative;
		top:5upx;
	}
	.faquan-index-button text{
		padding:5upx 10upx;
		margin-right:10upx;
		border-radius:10upx;
	}
	.faquan-index-button>text:first-child{
		background: #FA436A;
	}
	.faquan-index-button>text:last-child{
		background:#F76260;
	}
	.faquan-index-content-detail{
		color:#FA436A;
		font-size:30upx;
		font-weight:bold;
	}
	.faquan-index-content-detail>image{
		display:inline-block;
		width:30upx;
		height:30upx;
		margin-left:10upx;
		position:relative;
		top:5upx;
	}
	.faquan-index-image{
		width:100%;
		display: flex;
		flex-direction:row;
		flex-wrap:wrap;
		white-space:nowrap;
		flex:1;
	}
	.faquan-index-image>view{
		width:28%;
		padding:2%;
	}
	.faquan-index-image>view>image{
		width:100%;
		height:200upx;
	}
	.faquan-index-kouling{
		width:98%;
		background:#F8F6FC;
		padding:2%;
	}
	.faquan-index-kouling>view:last-child{
		text-align:right;
	}
	.faquan-index-kouling>view:last-child>text{
		padding:10upx 20upx;
		border:#FA436A 1px solid;
		text-align:right;
		color:#FA436A;
		border-radius:20upx;
	}
	
</style>
